<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			
		</view>
		
		<!--内容开始-->
		<view class="add-box left clearfix">
			<uni-section title="新增菜单" type="line">
				<view class="example">
					<!-- 基础用法，不包含校验规则 -->
					<uni-forms ref="form" :modelValue="formData" label-width="100">
						<uni-forms-item label="显示名称" required name="title">
							<uni-easyinput v-model="formData.title" placeholder="菜单名称，不可超过5个汉字" />
						</uni-forms-item>
						<uni-forms-item label="图标" name="icon">
							<uni-easyinput v-model="formData.icon" placeholder="图标class名称，只支持阿里图标库" />
						</uni-forms-item>
						<uni-forms-item label="URL" required  name="url">
							<uni-easyinput v-model="formData.url" placeholder="页面链接,如：system-menu" />
						</uni-forms-item>
						
						<uni-forms-item label="序号" name="sort">
							<uni-easyinput v-model="formData.sort" placeholder="数值越小，排名越靠前" />
						</uni-forms-item>
						
						<uni-forms-item label="父菜单" name="parent_id">
							<uni-easyinput disabled="true" v-model="parentTitle" placeholder="自动读取，无需选择" />
						</uni-forms-item>
						
						<uni-forms-item label="是否启用" required name="is_show">
							<switch @change="setIsshow" :checked="formData.is_show" style="margin-top:5px;" />
						</uni-forms-item>
						
						<uni-forms-item label="" style="margin-top:50px;text-align: center;">
							
							<view class="form-quxiao-submit right" @click="navigatorToList()">
								取消
							</view>
							
							<view class="form-submit right" @click="submitForm">
								确定
							</view>
							
						</uni-forms-item>
						
					</uni-forms>
				</view>
			</uni-section>
		</view>
		<!--内容结束-->
	</view>
</template>
<style scoped>
	.form-quxiao-submit{width:100px;line-height:40px;height:40px;color:#666;border-radius: 5px;text-align: center;border:1px solid #ccc;margin-right:20px;cursor:pointer;}
	.form-submit{width:100px;line-height:40px;height:40px;background:#2979ff;color:#fff;border-radius: 5px;text-align: center;margin-right:20px;cursor:pointer;}
	.example {
			padding: 15px;
			background-color: #fff;
		}
	
		.segmented-control {
			margin-bottom: 15px;
		}
	
		.button-group {
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
		}
	
		.form-item {
			display: flex;
			align-items: center;
		}
	
		.button {
			display: flex;
			align-items: center;
			height: 35px;
			margin-left: 10px;
		}
	.add-box{width:700px;margin-left:calc((100% - 700px)/3);margin-top:30px;min-height:400px;}
</style>

<script>
	var db = uniCloud.database();
	var systemMenu = uniCloud.importObject('systemmenu',{customUI:true});
	import common from '/static/js/common.js';
	export default {
		name:"system-menu-add",
		data() {
			return {
				parentTitle:null,
				formData:{
					title:'',
					icon:'',
					url:'#',
					sort:'0',
					is_show:true
				},
				routes: [
				        {
				          to: "/A",
				          name: "系统菜单",
				        },
				        {
				          to: "/B",
				          name: "菜单管理",
				        },
						{
						  to: "/c",
						  name: "新增菜单",
						}
				      ],
					rules: {
						title:{
							rules: [
								{
								required: true,
								errorMessage: '请输入菜单标题'
								}
							]
						},
						url:{
							rules: [
								{
								required: true,
								errorMessage: '请输入URL'
								}
							]
						}
					}
			};
		},
		props:{
			id:{
				type:String
			},
			children:{
				type:String
			},
			childrenId:{
				type:String
			},
			newAdd:{
				type:String
			}
		},
		mounted() {
				var that = this;
				if(this.id && this.id!='undefined' && !this.newAdd){
					uni.showLoading({
						title:'加载中'
					});
				}
				
				// 需要在onReady中设置规则
				this.$refs.form.setRules(this.rules)
				//查询出当前记录
				if(this.children && this.id && this.id!='undefined'){
					db.collection('system_menu').where({_id:this.id}).get({getOne:true}).then(res=>{
						this.parentTitle = res.result.data.title;
					});
				}
				
				if((this.children || this.id) && this.id!='undefined' && !this.newAdd){
					db.collection('system_menu').where({_id:this.id}).get({getOne:true}).then(res=>{
						uni.hideLoading();
						if(!this.childrenId && !this.children){
							this.formData = res.result.data;
						}else{
							var children = res.result.data.children;
							var index = children.findIndex(item => item._id === that.childrenId);
							this.formData = children[index];
						}
						
					});
				}
			},
		methods:{
			//跳转列表页
			navigatorToList(){
				uni.navigateTo({
					url:'/pages/index/index?page=system-menu'
				})
			},
			//设置显示开关
			setIsshow(event){
				this.formData.is_show = event.detail.value;
			},
			//提交订单
			submitForm(form){
				this.$refs.form.validate().then(res=>{
					var id = this.id;
					var children = this.children;
					var childrenId = this.childrenId;
					if(!id || id=='undefined'){
						if(!children){
							db.collection('system_menu').add(res).then(result=>{
								if(result.result.id){
									uni.showToast({
										title:'添加成功',
										icon:'none',
										duration:2000
									})
									setTimeout(function(){
										uni.redirectTo({
											url:'/pages/index/index?page=system-menu'
										})
									},2000)
									
								}
							}).catch(err=>{
								console.log('err',err);
							});
						}else{
							res._id = common.uuid();
							console.log(77777777);
						}
						
					}else{
						
						if(children && childrenId){
							console.log(555555);
							res._id = this.childrenId;
							//修改子菜单
							db.collection('system_menu').where({_id:id}).get({getOne:true}).then(result=>{
								var data = result.result.data;
								var childrenData = data.children;
								var index = childrenData.findIndex(item => item._id === childrenId);
								childrenData[index] = res;
								console.log('childrenData',childrenData);
								db.collection('system_menu').where({_id:id}).update({
									children:childrenData
								}).then(result=>{
									uni.showToast({
										title:'添加成功',
										icon:'none',
										duration:2000
									})
									setTimeout(function(){
										uni.redirectTo({
											url:'/pages/index/index?page=system-menu'
										})
									},2000)
								})
							});
							
						}else if(children && !childrenId){
							
							res._id = common.uuid();
							systemMenu.updateMenuChildren(id,res).then(result=>{
								
								if(result.code == 200){
									uni.showToast({
										title:'添加成功',
										icon:'none',
										duration:2000
									})
									setTimeout(function(){
										uni.redirectTo({
											url:'/pages/index/index?page=system-menu'
										})
									},2000)
								}
								
							});
							
						}else if(!children && !childrenId){
							//修改整体
							db.collection('system_menu').where({_id:id}).update(res).then(result=>{
								uni.showToast({
									title:'修改成功',
									icon:'none',
									duration:2000
								})
								setTimeout(function(){
									uni.redirectTo({
										url:'/pages/index/index?page=system-menu'
									})
								},2000)
							});
						}
					}
					
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

